
<!DOCTYPE html>
<html >
<head>
    <title>首页</title>
    <include file="Public/import_jquery" />
    <include file="Public/head" />
    <link href="__PUBLIC__/wap/css/package_detail.css" rel="stylesheet" />
    <link href="__PUBLIC__/css/swiper.min.css" rel="stylesheet" />
    <link href="__PUBLIC__/css/webgradients.css" rel="stylesheet" />
    <script src="__PUBLIC__/js/particleground.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .swiper-container {
            overflow: visible;
        }
        .swiper-wrapper {
            display: flex;
            align-items: center;
        }
        .swiper-slide {
            text-align: center;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .select-form {
            display: flex;
            justify-content: center;
            overflow: hidden;
        }
        .select-cards {

        }
    </style>
</head>
<body>
<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
<div class="page-group">
    <div class="page page-current" id='businessIndex'>
        <header class="bar bar-nav">
            <h1 class='title'>{$webtitle}</h1>
        </header>
        <div class="content">
            <div class="cm-content-nav">
                <div class="cm-logo-box">
                    <img src="__PUBLIC__/wap/img/cm-logo.png"/>
                    <div class="card">
                        <div class="card-content">
                            <div class="card-content-inner pakage-name-title strong_bliss">
                                <p>{$data['business_name']}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card product-card">
                <div class="card-header color_1">
                        <span>
                                --资费详情--
                        </span>
                </div>
                <div class="card-content">
                    <table class="expenses-table" id="price_info_table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th colspan="2">套餐内资费</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--<tr>-->
                            <!--<td class="table-info-name">-->
                                <!--<ul>-->
                                    <!--<li>全家亲168</li>-->
                                    <!--<li>168元</li>-->
                                <!--</ul>-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<ul>-->
                                    <!--<li>1~3人</li>-->
                                    <!--<li>国内主叫800分钟</li>-->
                                    <!--<li>1G国内流量</li>-->
                                    <!--<li>1G省内流量</li>-->
                                <!--</ul>-->
                            <!--</td>-->
                            <!--<td class="table-info-common" rowspan="3">-->
                                <!--<ul>-->
                                    <!--<li>成员间通话:2000分钟本地</li>-->
                                    <!--<li>宽带: 带宽200M</li>-->
                                    <!--<li>收视: 一部尊享版</li>-->
                                    <!--<li>连续12个月赠送本地共享流量不限量(40G后限速)</li>-->
                                <!--</ul>-->
                            <!--</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<td class="table-info-name">-->
                                <!--<ul>-->
                                    <!--<li>全家亲238</li>-->
                                    <!--<li>238元</li>-->
                                <!--</ul>-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<ul>-->
                                    <!--<li>1~4人</li>-->
                                    <!--<li>国内主叫1000分钟</li>-->
                                    <!--<li>2G国内流量</li>-->
                                <!--</ul>-->
                            <!--</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<td class="table-info-name">-->
                                <!--<ul>-->
                                    <!--<li>全家亲298</li>-->
                                    <!--<li>298元</li>-->
                                <!--</ul>-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<ul>-->
                                    <!--<li>1~6人</li>-->
                                    <!--<li>国内主叫1200分钟</li>-->
                                    <!--<li>3G国内流量</li>-->
                                <!--</ul>-->
                            <!--</td>-->
                        <!--</tr>-->
                        </tbody>
                        <tfoot>
                        <tr>
                            <td>
                                <ul>
                                    <li>套餐超出</li>
                                    <li>及</li>
                                    <li>其他业务</li>
                                </ul>
                            </td>
                            <td colspan="2">
                                <ul id="outside_content">
                                    <!--<li>-->
                                        <!--套餐外语音：-->
                                        <!--国内主叫0.19元/分钟，被叫全国免费-->
                                    <!--</li>-->
                                    <!--<li>-->
                                        <!--套餐外流量资费：-->
                                        <!--0.29元/M-->
                                    <!--</li>-->
                                </ul>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="card product-card">
                <div class="card-header color_2">
                            <span>
                                    --在线预约--
                            </span>
                </div>
                <div class="card-content">
                    <div class="select-form">
                        <div class="select-cards">
                            <div class="swiper-container">
                                <div class="swiper-wrapper" >
                                    <volist name="childList" id="v">
                                        <div class="swiper-slide" data-text="{$v['business_name']}" data-id="{$v['id']}">
                                            <div class="card {$v['color']}">
                                                <div class="card-content">
                                                    <div class="card-content-inner">
                                                        <p>{$v['business_name']}</p>
                                                        <p>{$v['price']}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </volist>
                                </div>
                                <!-- Add Pagination -->
                            </div>
                        </div>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li>
                                <a href="#" id="public_type_name" class="item-link list-button" data-id="{$childList[0]['id']}">
                                    {$childList[0]['business_name']}
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="content-block chose-card">
                        <p>
                            <a href="/wap/business/selectedBusiness/id/{$childList[0]['id']}" id="selected" class="button button-fill "> 选择套餐 </a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="card product-card">
                <div class="card-header color_3">
                        <span>
                                --温馨提示--
                        </span>
                </div>
                <div class="card-content">
                    <div class="card-content-inner">
                        <div class="list-block">
                            <ul id="explainList">
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>1、</span>优家20M/50M/100M等高带宽套餐,仅限FTTH能力达标小区办理；</div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>2、</span>
                                            优家套餐赠送的话费不能抵扣流量费或溢出流量费用；</div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>3、</span>
                                            优家套餐赠送话费不能抵扣通信账户支付、优家套餐费；</div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>4、</span>
                                            优家套餐赠送话费限当月有效；</div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>5、</span>
                                            办理范围：成都移动全球通、动感地带、神州行客户（不含神州行亲情卡、贺岁卡）；</div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>6、</span>
                                            客户申请办理优家套餐后须承诺12个月不能退出套餐；</div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>7、</span>
                                            办理优家套餐后，优家套餐次月生效，家庭账户生效后，所有费用均由主付费人统一支付，家庭账户付费方式为预付费；</div>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-inner">
                                        <div class="item-text">
                                            <span>8、</span>
                                            优家108及108以上套餐客户需先开通合家欢业务，但可享受合家欢业务功能费返还（合家欢业务功能费月初扣取，月末返还。优家套餐生效前开通合家欢业务扣取的功能费不予返还）；</div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
    /*  通过 php模板传数据  start */
    const bussinessData = {$dataJson};
    const childList = {$childListJson};
    const inside_info = bussinessData.inside_info ? JSON.parse(bussinessData.inside_info) : []
    const outside_info = bussinessData.outside_info ? JSON.parse(bussinessData.outside_info) : []
    // const colorList = ['lady_lips', 'night_fade', 'deep_relief' ]
    /*  通过 php模板传数据 end */

    $(document).on("pageInit", function(e, pageId, $page) {
        if(pageId == "businessIndex") {
            jquery('.cm-content-nav').particleground({
                dotColor: 'rgba(255,255,255,0.5)',
                lineColor: 'rgba(255,255,255,0.7)',
                parallaxMultiplier:5,
                lineWidth:0.1,
                dotSize:2,
                density:1500,
                particleRadius:3,
                proximity:100,
                parallaxMultiplier:15,
            });
        }
    });

    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 0,
        on: {
            slideChangeTransitionEnd: function(){
                //你的事件
                const { activeIndex, slides } = this
                const seletcCard = jquery(slides[activeIndex])
                const text = seletcCard.data('text')
                const id = seletcCard.data('id')
                $('#public_type_name').text(text).data('id', id)
                console.log(id)
                $("#selected").prop('href', `/wap/business/selectedBusiness/id/${id}`);
            },
        },
    });
    jquery(function () {
        // 绑定事件
        // 初始化
        function init () {
            loadData()
        }

        // 加载数据
        function loadData( ) {
            loadTable()
            loadExplain()
        }
        // 加载表数据
        function loadTable() {
            const tableBody = $("#price_info_table").find('tbody')
            const outside_content = $("#outside_content")
            const childNum = childList.length
            const commonInside = (`<td class="table-info-common" rowspan="${childNum}">
                <ul>
                    ${inside_info.map(item => (`<li>${item}</li>`)).join('')}
                </ul>
            </td>`)
            const tableInsidesContent = (childList.map((item, index) => {
                const itemInsideInfo = item.inside_info ? JSON.parse(item.inside_info) : []
                const itemInside = (`<ul>
                ${itemInsideInfo.map(_item => (`<li>${_item}</li>`)).join('')}
                    </ul>`)
                    return (`<tr>
                        <td class="table-info-name">
                            <ul>
                                <li>${item.business_name}</li>
                                <li>${item.price}元</li>
                            </ul>
                        </td>
                        <td>
                            ${itemInside}
                        </td>
                        ${ index === 0
                        ? commonInside
                        : ''
                        }
                    </tr>`)
            })).join('')
            const tableOutsideContent = outside_info.map(item => (`<li>${item}</li>`)).join('')
            tableBody.html(tableInsidesContent)
            outside_content.html(tableOutsideContent)
        }

        // 加载温馨提示
        function loadExplain () {
            const explain = bussinessData.explain ? JSON.parse(bussinessData.explain) : []
            const explainList = Object.entries(explain).map(([ key, value ])=> (`
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-text">
                            <span>${Number(key) + 1}、</span>
                            ${value}</div>
                    </div>
                </li>
            `)).join('');
            jquery('#explainList').html(explainList)
        }
        init()
    })
</script>
<include file="Public/footer" />
</body>
</html>